<!DOCTYPE html>
<html>
<head>
<style>
body {
  padding: 3rem;
  font-size: 16px;
}

textarea {
  width: 30%;
  min-height: 30rem;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 0.8rem;
  line-height: 1.2;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-indigo.css">
<title>Page Title</title>
</head>
<body>

<h1>Silicool Data Reporting</h1>
<h2 id="sensorID"></h2>
<h2 id="aaResult"></h2>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<div id="timeContainer"></div>
<div id="container"></div>
<div id="container1"></div>
<div id="container2"></div>
<div id="tableContainer"></div>

</body>
<script type="text/javascript" src="echarts.min.js"></script>
<script src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript">

    function handleFileSelect(evt) {
		var files = evt.target.files; // FileList object

		// files is a FileList of File objects. List some properties.
		var output = [];
		for (var i = 0, f; f = files[i]; i++) {
		    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
					  f.size, ' bytes, last modified: ',
					  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
					  '</li>');
		    var reader = new FileReader();
			reader.readAsText(f, "UTF-8");
			 reader.onload = function (evt) {
				displayData(evt.target.result);
				//drawSFRCurve2(evt.target.result);
			}
			reader.onerror = function (evt) {
				console.log("error in reading file");
			}
		}
		document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
	}
	document.getElementById('files').addEventListener('change', handleFileSelect, false);

	//load local file 
	function getFiles(){
		var inp = document.getElementById("get-files");
		console.log(inp);
		for (i = 0; i < inp.files.length; i++) {
			let file = inp.files[i];
			console.log(file);
		}
	}
	
	//End of load local file
	var sfr_count = 0;
	var min_z = 0;
	var max_z = 0;
	function drawSFRCurve2(inputData) {
		var myData = JSON.parse(inputData);
		var dataSeries = {};
		for (var operatorName in myData) {
			console.log(operatorName);
			if (operatorName === "zPeak") {
				var dataX = [], dataY = [];  var data = [];
				var pz = myData[operatorName];
				var dataXY = [];
				dataXY.push([pz,0]);
				dataXY.push([pz,100]);
				data.name = operatorName;
				data.dataXY = dataXY;
				dataSeries[operatorName] = data;
			}else if ((operatorName === "CC" || operatorName === "UL_1" || operatorName === "UR_1" || operatorName === "LL_1" || operatorName === "LR_1"
			     || operatorName === "UL_2" || operatorName === "UR_2" || operatorName === "LL_2" || operatorName === "LR_2"
				 || operatorName === "UL_3" || operatorName === "UR_3" || operatorName === "LL_3" || operatorName === "LR_3")){
				var dataXY = []; var data = [];
				var index = 0;
				for (var z in myData[operatorName]) {
					var sfr = myData[operatorName][z]["sfr"];
					var pz = myData[operatorName][z]["pz"];
					if (index == 0) min_z = pz;
					max_z = pz;
					index++;
					dataXY.push([pz, sfr]);
				}
				data.name = operatorName;
				data.dataXY = dataXY;
				dataSeries[operatorName] = data;
			}
		}
		drawSFRCurve("SFR", dataSeries);
	}
	//Draw SFR chart
	var dataSeriesTemp = [];
	var gDataSeries = {};
	function drawSFRCurve(operatorName, dataSeries) {
	    gDataSeries = dataSeries;
		if (operatorName.indexOf("SFR") !== -1) {
			var container; var title = "";
			if (sfr_count === 0) {
				container = document.getElementById("container");
				title = "AA_1";
			}
			if (sfr_count === 1) { 
				container = document.getElementById("container1");
				title = "AA_2";
			}
			if (sfr_count === 2) { 
				container = document.getElementById("container2");
				title = "AA_3";
			}
			sfr_count++;
			if (sfr_count > 2) sfr_count = 0; 
			container.style.height = "500px"
			var myChart = echarts.init(container);
			var app = {};
			//document.body.appendChild(container);
			console.log(operatorName);
			app.title = title;
			option = {
			    title: {
					text: title,
					left: 'left'
				},
				legend: {
					data:['CC', 'UL', 'UR', 'LL', 'LR', 'zPeak']
				},
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'value',
					min: min_z,
					max: max_z,
					axisTick: {
						alignWithLabel: true
					}
				},
				yAxis: {
					type: 'value'
				},
				tooltip: {
					trigger: 'none',
					axisPointer: {
						type: 'cross'
					}
				},
				series: [{
						name:'CC',
						data: dataSeries["CC"].dataXY,
						type: 'line',
						smooth: true,
					}
				]
			};
			
			if (dataSeries["zPeak"] !== undefined) {
				var zPeakDataSeries = {};
				zPeakDataSeries.name = 'zPeak';
				zPeakDataSeries.data = dataSeries["zPeak"].dataXY;
				zPeakDataSeries.type = 'line';
				option.series.push(zPeakDataSeries);
			}
			
			if (dataSeries["UL_3"] !== undefined) {
				var ulDataSeries = {}, urDataSeries = {}, llDataSeries = {}, lrDataSeries = {};
				ulDataSeries.name = 'UL'; ulDataSeries.data = dataSeries["UL_3"].dataXY; ulDataSeries.type = 'line'; ulDataSeries.smooth = true;
				urDataSeries.name = 'UR'; urDataSeries.data = dataSeries["UR_3"].dataXY; urDataSeries.type = 'line'; urDataSeries.smooth = true;
				llDataSeries.name = 'LL'; llDataSeries.data = dataSeries["LL_3"].dataXY; llDataSeries.type = 'line'; llDataSeries.smooth = true;
				lrDataSeries.name = 'LR'; lrDataSeries.data = dataSeries["LR_3"].dataXY; lrDataSeries.type = 'line'; lrDataSeries.smooth = true;				
				option.series.push(ulDataSeries); option.series.push(urDataSeries); option.series.push(llDataSeries); option.series.push(lrDataSeries);
			} else if (dataSeries["UL_2"] !== undefined) {
				var ulDataSeries = {}, urDataSeries = {}, llDataSeries = {}, lrDataSeries = {};
				ulDataSeries.name = 'UL'; ulDataSeries.data = dataSeries["UL_2"].dataXY; ulDataSeries.type = 'line'; ulDataSeries.smooth = true;
				urDataSeries.name = 'UR'; urDataSeries.data = dataSeries["UR_2"].dataXY; urDataSeries.type = 'line'; urDataSeries.smooth = true;
				llDataSeries.name = 'LL'; llDataSeries.data = dataSeries["LL_2"].dataXY; llDataSeries.type = 'line'; llDataSeries.smooth = true;
				lrDataSeries.name = 'LR'; lrDataSeries.data = dataSeries["LR_2"].dataXY; lrDataSeries.type = 'line'; lrDataSeries.smooth = true;				
				option.series.push(ulDataSeries); option.series.push(urDataSeries); option.series.push(llDataSeries); option.series.push(lrDataSeries);
			} else if (dataSeries["UL_1"] !== undefined) {
				var ulDataSeries = {}, urDataSeries = {}, llDataSeries = {}, lrDataSeries = {};
				ulDataSeries.name = 'UL'; ulDataSeries.data = dataSeries["UL_1"].dataXY; ulDataSeries.type = 'line'; ulDataSeries.smooth = true;
				urDataSeries.name = 'UR'; urDataSeries.data = dataSeries["UR_1"].dataXY; urDataSeries.type = 'line'; urDataSeries.smooth = true;
				llDataSeries.name = 'LL'; llDataSeries.data = dataSeries["LL_1"].dataXY; llDataSeries.type = 'line'; llDataSeries.smooth = true;
				lrDataSeries.name = 'LR'; lrDataSeries.data = dataSeries["LR_1"].dataXY; lrDataSeries.type = 'line'; lrDataSeries.smooth = true;				
				option.series.push(ulDataSeries); option.series.push(urDataSeries); option.series.push(llDataSeries); option.series.push(lrDataSeries);
			}

			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		}
	}
	//End of Draw SFR Chart
	
	//Draw Time chart
	function drawTimeChart(map) {
		var container = document.getElementById("timeContainer");
		container.style.height = "900px"
		var myChart = echarts.init(container);
		var app = {};
		option = null;
		app.title = 'Time Pie Chart';

		option = {
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b}: {c} ({d}%)"
			},
			legend: {
				orient: 'vertical',
				x: 'left',
				data:[]
			},
			series: [
				{
					name:'Time Pie Chart',
					type:'pie',
					selectedMode: 'single',
					radius: [0, '30%'],

					label: {
						 normal: {
							formatter: ' {b|{b}} {c}ms {per|{d}%}',
							backgroundColor: '#eee',
							borderColor: '#aaa',
							borderWidth: 1,
							borderRadius: 4,
							rich: {
								a: {
									color: '#999',
									lineHeight: 22,
									align: 'center'
								},
								hr: {
									borderColor: '#aaa',
									width: '100%',
									borderWidth: 0.5,
									height: 0
								},
								b: {
									fontSize: 16,
									lineHeight: 33
								},
								per: {
									color: '#eee',
									backgroundColor: '#334455',
									padding: [2, 4],
									borderRadius: 2
								}
							}
						}
					},
					data:[
					]
				}
			]
		};
		for (var t in map) {
			var d = {};
			d.name = map[t].name;
			d.value = map[t].timeElapsed;
			option.series[0].data.push(d);
			option.legend.data.push(map[t].name);
		}
		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
	}
	//End of Draw Time chart
	function displayData(inputData) {
		sfr_count = 0;
		document.getElementById("tableContainer").innerHTML = "";
		var myData = JSON.parse(inputData);
		var table = document.getElementById("myTable");
		var uuid = "";
		var aaTime = 0;
		option = null;
		var timeMap = [];
		for (var operatorName in myData) {
			var title = document.createElement("h1");
			title.innerHTML = operatorName;
			document.getElementById("tableContainer").appendChild(title);
			var x = document.createElement("table");
			x.setAttribute("id", "table_"+operatorName);
			document.getElementById("tableContainer").appendChild(x);
			var row = x.insertRow();
			var row1 = x.insertRow();
			var count = 0;
			var dataSeries = {};
			console.log(operatorName);
			if (operatorName == "uuid") {
				uuid = myData[operatorName];
			}
			for (var attr in myData[operatorName]) {
				var cell1, cell2;
				if (attr === "result" || attr === "Result")
				{
					cell1 = row.insertCell(0);
					cell2 = row1.insertCell(0);
				} else {
					cell1 = row.insertCell(count);
					cell2 = row1.insertCell(count);
				}
				count++;
				cell1.innerHTML = attr;
				cell2.innerHTML = myData[operatorName][attr];
				
				if (attr === "timeElapsed") {
					var t = {};
					t.name = operatorName;
					t.timeElapsed = myData[operatorName][attr];
					timeMap.push(t);
					if (operatorName.indexOf("AA") !== -1 && operatorName.indexOf("AA_Load") == -1) {
						console.log(t.timeElapsed);
						aaTime += t.timeElapsed;
					}
				}
				if (attr === "sensorID") {
					document.getElementById("sensorID").innerHTML = "Sensor ID: " + myData[operatorName][attr]
				}
				if (operatorName.indexOf("SFR") !== -1 && (attr === "CC" || attr === "UL_2" || attr === "UR_2" || attr === "LL_2" || attr === "LR_2")){
					var dataX = [], dataY = [];  var data = [];
					for (var z in myData[operatorName][attr]) {
						var sfr = myData[operatorName][attr][z]["sfr"];
						dataX.push(z);
						dataY.push(sfr);
					}
					data.name = attr;
					data.z = dataX;
					data.sfr = dataY;
					dataSeries[attr] = data;
				}
			}
			//drawSFRCurve(operatorName, dataSeries);
		}
		document.getElementById("aaResult").innerHTML = "Total AA time: " + aaTime + "ms";
		drawTimeChart(timeMap);
		var textedJson = JSON.stringify(myData, undefined, 4);
		$('#myTextarea').text(textedJson);
	}
</script>

</html>
